<template>
  <div class="calendar">
    <h2>校历</h2>
    <div class="search mb-20">
      <Input
        style="width:20%"
        v-model.trim="keyword"
        search
        clearable
        enter-button
        @enter="searchList"
        @on-search="searchList"
        placeholder="搜索用户名、工号、姓名"
      />
    </div>
    <div class="bt-opera mb-10">
      <div>
        <Button class="cb-icon" icon="md-add" @click="showCalerdar(false)">新增</Button>
        <Button class="cb-icon ml-10" icon="md-add" @click="showSchool">学校</Button>
      </div>
      <!--删除组件 handelerBtn事件处理导出 or 删除 insert处理导入弹框层的显示,处理insertModal值的变化导致ImportModal组件的弹框层-->
      <delete-data-btn @on-click="handelerBtn" :insert.sync="insertModal"></delete-data-btn>
    </div>
    <!--loading公共属性 -->
    <Table
      border
      ref="selection"
      :loading="loading"
      size="small"
      :columns="columns"
      :data="tableData"
      @on-selection-change="doSelect"
    >
      <template slot-scope="{ row }" slot="code">
        <span>{{ row.code }}</span>
      </template>
      <template slot-scope="{ row }" slot="name">
        <span>{{ row.name }}</span>
      </template>
      <template slot-scope="{ row }" slot="semesterYear">
        <span>{{ row.semesterYear }}</span>
      </template>
      <template slot-scope="{ row }" slot="semesterNumber">
        <span>{{ row.semesterNumber }}</span>
      </template>
      <template slot-scope="{ row }" slot="weeks">
        <span>{{ row.weeks }}</span>
      </template>
      <template slot-scope="{ row }" slot="range">
        <span>{{ row.dateStart }} ~ {{ row.dateEnd }}</span>
      </template>
      <template slot-scope="{ row }" slot="deal">
        <div class="hasSplitLast">
          <span @click="showCalerdar(true, row)">编辑</span> |
          <span @click="toDetail(row)">查看详情</span> |
          <span @click="showDelModal(row.id)">删除</span> |
          <span @click="toDetailModal(row)">弹窗详情</span>
        </div>
      </template>
    </Table>
    <div class="pagination mt-10">
      <Page
        :total="totalSize"
        :current="calendar.pageNumber"
        @on-change="pageNumChange"
        @on-page-size-change="pageSizeChange"
        show-total
        show-sizer
        show-elevator
      />
    </div>
    <!--新增弹框层 -->
    <AddCalendar
      v-model="calenderModal"
      :rowData="rowData"
      :edit.sync="edit"
      @on-update="getList"
    ></AddCalendar>
    <AddShcool v-model="showSchoolModal"></AddShcool>
    <!--删除 or 导出弹框层, 调用group.ts文件中的deleteConfirm()-->
    <ChooseModal
      v-model="chooseModelVisible"
      @confirm="deleteConfirm(provideType())"
      :title="chooseTitle"
    ></ChooseModal>
    <BaseModal
      v-model="showModal"
      title="确认删除"
      width="350"
      type="warning"
      ok-type="error"
      @on-ok="delData"
      @on-cancel="showModal = false"
      simple="true"
      >此数据将被删除，确认操作吗？</BaseModal
    >
    <!--表格弹框展示 -->
    <BaseModal
      v-model="showDetailModal"
      title="详情"
      @on-ok="showDetailModal = false"
      @on-cancel="showDetailModal = false"
    >
      <BaseTable :value="detailData" :row="1"></BaseTable>
    </BaseModal>
    <!--导入组件, insert切换弹框 传入组件使用v-model形式，则Prop值通过value定义接受值  -->
    <ImportModal @refresh="getList" v-model="insertModal"></ImportModal>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Provide } from "vue-property-decorator";
// import { GroupMix } from "@mixins/index.ts";
import { Group } from "@/model/group.ts"; //类似mixins文件，存放公共方法
import { ParamData } from "@/store/interface.ts";
import { BASE64, chunk } from "@utils/tools.ts";
import { deleteData } from "@/api/service.js";
import AddCalendar from "@views/AddCalendar.vue";
import AddShcool from "@views/AddShcool.vue";
import BaseModal from "@components/iv-modal/BaseModal.vue";
import DeleteDataBtn from "@components/iv-button/DeleteDataBtn.vue";
import BaseTable from "@components/iv-table/BaseTable.vue";
import ChooseModal from "@components/iv-choose/ChooseModal.vue";
import ImportModal from "@views/ImportModal.vue";
import { Tools } from "@/model/tools";
import { calendarColumns, exportCloumn } from "@/data/columns.js";

@Component({
  components: {
    AddCalendar,
    BaseModal,
    BaseTable,
    DeleteDataBtn,
    ChooseModal,
    ImportModal,
    AddShcool
  }
})
export default class DataCalendar extends Group {
  private calenderModal: boolean = false;
  private rowData: Object = {};
  private edit: boolean = false; // 新增 or 编辑
  private showModal: boolean = false;
  private showSchoolModal: boolean = false;
  private showDetailModal: boolean = false; // 弹窗详情
  private insertModal: boolean = false; //导入弹框
  private detailData: Array<any> = []; // 弹框详情

  private id: number = 0;
  private get criteriaBase64() {
    return BASE64.encode(JSON.stringify([["name", "ilike", this.keyword]]));
  }

  @Provide()
  public getType = this.provideType(); //provideType()是方法而不是计算属性

  private get columns() {
    return calendarColumns;
  }

  /**
   * 重写
   */
  public get queryParams() {
    return {
      type: this.provideType(),
      pageNumber: this.calendar.pageNumber,
      pageSize: this.calendar.pageSize,
      criteria: this.criteriaBase64
    };
  }

  /**
   * 重写group.ts中的deleteParams()方法
   */
  public get deleteParams() {
    let params = {
      type: this.provideType(),
      ids: this.selectedRowIds
    };
    //区分导出情况
    return this.isExport
      ? Object.assign(params, {
          includeAttributes: exportCloumn[this.provideType()]
        })
      : params;
  }

  /**
   * 使用依赖注入provide,inject
   */
  provideType() {
    return "schoolCalendar";
  }
  /**
   * 弹出层
   */
  showCalerdar(isEdite, row) {
    this.calenderModal = true;
    this.rowData = row || {};
    this.edit = isEdite;
  }

  showSchool() {
    this.showSchoolModal = true;
  }

  /**
   * 搜索
   */
  searchList() {
    this.calendar.criteria = this.criteriaBase64; //模糊查询
    this.getList();
  }

  /**
   * 详情
   */
  toDetail(row) {
    this.$router.push({
      name: "detail",
      params: row
    });
  }
  /**
   * 弹框详情
   */
  toDetailModal(row) {
    this.showDetailModal = true;
    const {
      code,
      name,
      semesterYear,
      semesterNumber,
      weeks,
      dateStart,
      dateEnd,
      dateStartTeaching,
      dateEndTeaching,
      dateCheckinStaff,
      dateCheckinStudent
    } = row;

    this.detailData = [
      { name: "编码", value: code },
      { name: "名称", value: name },
      { name: "学年", value: semesterYear },
      { name: "学期", value: semesterNumber },
      { name: "周数", value: weeks },
      { name: "开始日期", value: dateStart },
      { name: "结束日期", value: dateEnd },
      { name: "教学开始日期", value: dateStartTeaching },
      { name: "教学结束日期", value: dateEndTeaching },
      { name: "教师报到日期", value: dateCheckinStaff },
      { name: "学生报到日期", value: dateCheckinStudent }
    ];
  }

  private showDelModal(id) {
    this.showModal = true;
    this.id = id; //删除单个id
  }

  /**
   * 删除
   */
  async delData() {
    let params = {
      ids: [this.id],
      type: this.provideType()
    };
    const [err, data] = await deleteData(params);
    this.commLoading(false);
    if (err) {
      let msg = err.message || "删除信息异常";
      this.$Message.error(msg);
      return;
    }
    this.showModal = false;
    this.$Message.success("删除成功");
    this.getList();
  }
  mounted() {
    this.getList();
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.calendar {
  .bt-opera {
    display: flex
    justify-content: space-between
  }
  >>>.ivu-input-icon-clear {
    margin-right: 50px
  }
}
</style>
